<html>
	<head>
		<script language="javascript">
			var stop=false;

			function rand(x) {
				return Math.floor(Math.random()*x);
			}

			function extend(obj) {
				Object.getPrototypeOf(obj).putPixel = function(x,y) {
						this.fillRect(x,y,3,3);
						return this;
					}

				Object.getPrototypeOf(obj).randColor = function() {
					var rgb = "rgb("
						+ rand(255) + "," 
						+ rand(255) + ","
						+ rand(255) + ")";
					this.fillStyle = rgb;
					return this;
				}

				Object.getPrototypeOf(obj).go = function() {
					this.randColor();
					this.putPixel(rand(800),rand(600));
					return this;
				}
			}

			function getKey(event) {
				console.log("tocaron: ",event.which);
				stop=true;
				console.log("ahora stop es: ",stop);
			}

			function init() {
				var example = document.getElementById('example');
				console.log(example);
				var context = example.getContext('2d');
				console.log(context);
				extend(context);
				return context;
			}

			function draw(context) {
				for (i=0; i<400000 && !stop; i++) {
					if (stop) console.log("stop en loop es",stop);
					context.go();
				}
				if (stop) {
					console.log("terminamos por keystroke");
				}
				else {
					console.log("terminamos de viejos");
				}
			}

			function run() {
				draw(init());
			}
		</script>
	</head>
	<body bgcolor="#000000" onkeyup="getKey(event)">
		<canvas id="example" width="800" height="600">
		This text is displayed if your browser does not support HTML5 Canvas.
		</canvas>
		<button type="button" onclick="run()">Dale gas</button>
	</body>
</html>
